@color1: #666;
@font-size1:.28rem;
body, html{
  height: 100%;
  line-height: 1;
  font-weight: 200;
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  font-size: @font-size1;
  background-color: rgba(232, 237, 242, 0.6);
  font-weight: 300;
}
.clearfix{
  display: inline-block;
  &:after{
    display: block;
    content: ".";
    height: 0;
    line-height: 0;
    clear: both;
    visibility: hidden;
  }
}
.fixedTop{
  position: fixed;
  top: 0rem;
  z-index: 1000;
}
/* ============================================================
         flex：定义布局为盒模型
         flex-v：盒模型垂直布局
         flex-1：子元素占据剩余的空间
         flex-wrap：子元素超过的换行
         flex-align-center：子元素垂直居中
         flex-pack-center：子元素水平居中
         flex-pack-justify：子元素两端对齐
         兼容性：ios 4+、android 2.3+、winphone8+
         ============================================================ */
/* ============================================================
         loading: 加载
         last: 最后一页提示
         bg-white： 白色背景
         ============================================================ */
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-v {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex-wrap{
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}
.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-pack-justify {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.text-ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-line2{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
input[placeholder], [placeholder], *[placeholder],::-webkit-input-placeholder {
  color:#ccc;
}
input{
  color: #333 !important;
  font-weight: 300;
}
.color3{
  color: #333;
}
.page {
  background: #fff;
  padding: 0 .34rem .2rem;
  //overflow-y: auto;
  //overflow-scrolling: touch;
  //-webkit-overflow-scrolling: touch;
}
.btn{
  width: 100%;
  height: .96rem;
  line-height: .96rem;
  background-color: #e1e1e1;
  border-radius: 4px;
  //margin-top: .25rem;
  border: 0;
  display: block;
  text-align: center;
  font-weight: 300;
  &:active{
    opacity: 0.85;
  }
}
.line{
  height: 1px;
  background: #ccc;
}
.line-v{
  width: 1px;
  background: #ccc;
}
.btn1{
  background-color: #FF4A4A;
  color: #fff !important;
}
.border-right{
  border-right: 1px #E8EDF2 solid;
}
.border-left{
  border-right: 1px #E8EDF2 solid;
}
.border-bottom{
  border-bottom: 1px #E8EDF2 solid;
}
.border-top{
  border-top: 1px #E8EDF2 solid;
}
.border-1px{
  border: 1px #E8EDF2 solid;
}
.color-1{
  color: #b00b0b;
}
.red-color{
  color: #ff4a4a !important;
}
.fade{
  position: fixed;
  width: 100%;
  height:100%;
  top:0;
  left: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 2;
  overflow: hidden;
}
.show{
  display: block;
}
.xm-from{
  input{
    padding-left: 0;
  }
  .input-group{
    margin-top: .2rem;
  }
  .code{
    width: 1.8rem;
    text-align: center;
    background-color: #cecece;
    color: #fff;
    &:active{
      opacity: .85;
    }
  }
  #next{
    margin-top: .8rem;
  }
}
.foot-blank{
  width: 100%;
  height: 1.2rem;
}

.mint-msgbox{
  font-size: .32rem;
}
.mint-msgbox-header{
  padding: .3rem 0 0;
}
.mint-msgbox-title{
  font-size: .32rem;
}
.mint-msgbox-content{
  padding: .2rem .4rem .3rem;
}
.mint-msgbox-btn{
  line-height: .7rem;
}
.mint-msgbox-btns{
  height: .8rem;
  line-height: .8rem;
}
.point{
  &:after{
    content: " ";
    width: .15rem;
    height: .15rem;
    border-radius: 50%;
    background-color: red;
    margin-left: 5px;
    position: absolute;
  }
}
.mint-toast{
  padding: .3rem;
}
.mint-toast-text{
  font-size: .32rem;
}
.mint-toast{
  min-width: 2rem;
  line-height: .6rem;
}
.bg-white{
  background-color: #fff;
}
.loading{
  margin: .2rem auto;
  text-align: center;
  font-size: .24rem;
  span{
    line-height: normal;
    margin-right: .3rem;

    .mint-spinner-fading-circle{
      width: .38rem;
      height: .38rem;
    }
  }
}
.last{
  text-align: center;
  .tit{
    height: .8rem;
    font-size: .22rem;
    line-height: .8rem;
    text-align: center;
    color: #999;
    background: #f5f5f5;
  }
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.text-overflow{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: .1rem;
}
.underline{
  text-decoration: underline;
}

.bg-gray{
  background-color: #ccc;
}
input.num{
  max-width: .8rem;
}
.paddingTop20{
   padding-top: .2rem;
}
.paddingTop10{
   padding-top: .1rem;
}
.paddingBottom10{
  padding-bottom: .1rem;
}
.no-goods, .empty{
  padding: 1rem;
  text-align: center;
  background-color: #fff
}
.empty{
  .icon{
    font-size: 1rem;
  }
}
.picker-item.picker-selected{
  color: #ad1016!important;
}
.bg-img{
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.bg-img1{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size:auto 100%;
}
.zy{
  line-height: .2rem;
  margin-left: .12rem;
  padding: .02rem .05rem;
  background: #FF4A4A;
  border-radius: 6px;
  font-size: .2rem;
  color: #fff;
}
.font26{
  font-size: .26rem;
}
.color9{
  color: #999;
}
.colorD{
  color:  #D8D8D8;
}
.marginCenter{
  margin: 0 auto;
}
//价格
.priceItem{
  span{
    position: relative;
    display: inline-block;
    line-height: .16rem;
    top: .08rem;
    i{
      display: block;
      color:  #D8D8D8;
      &.active{
        color: #FF4A4A;
      }
    }
  }
}
.notice{
  position: relative;
  padding: 0rem 0 .2rem 1.6rem;
  text-align: left;
  .error{
    position: relative;
    left:0;
    &::before{
      content: ' ';
      position: absolute;
      width: .24rem;
      height: .24rem;
      left: 0;
      background-image: url("../../assets/images/sigh.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}

.status-group{
  padding: .2rem .3rem .2rem .6rem;
  .status-item{
    position: relative;
    border-left: solid #ccc 1px;
    padding-left: .6rem;
    padding-bottom: .1rem;
    &:before{
      position: absolute;
      top: 0;
      left: -.07rem;
      content: ' ';
      width: .13rem;
      height: .13rem;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      border-radius: .08rem;
    }
    &.start-item:before{
      box-shadow: 0 0 0.08rem #01f825;
      background-color: #2ec640;
      border: 1px solid #f5f5f5;
    }
    .status-item-con{
      h4{
        font-size: .24rem;
        color: #333;
      }
      p{
        font-size: .22rem;
        padding: .2rem 0;
        color: #999;
      }
    }
  }
}

em.icon.tag{
  display: inline-block;
  border: 1px solid #FF4A4A;
  color: #FF4A4A;
  padding: .04rem .05rem;
  border-radius: 4px;
  font-size: .24rem;
  font-weight: 400;
  line-height: .3rem;
  white-space: nowrap;
  height: .3rem;
  &.bg{
    color: #fff;
    background-color: #FF4A4A;
  }
}

/*商品列表*/
.cate-list{
  flex-wrap: wrap;
  background: #fff;
  li{
    flex: 0 0 50%;
    padding-top: .1rem;
    //height: 5.78rem;
    box-sizing: border-box;
    border-bottom: 1px solid #E8EDF2;
    overflow: hidden;
    &:nth-child(2n-1){
      border-right: 1px solid #E8EDF2;
    }
    .cell-img{
      width: 100%;
      height: 3.55rem;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .cell-info{
      padding:.16rem .24rem;
      h3{
        line-height: .33rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .24rem;
        color: #333;
      }
      .price{
        padding: .16rem 0 .22rem;
        span{
          line-height: .3rem;
          font-size: .24rem;
          color: #FF4A4A;
          em{
            font-size: .32rem;
          }
        }
        i{
          float: right;
          line-height: .22rem;
          font-style: normal;
          font-size: .24rem;
          color: #CCCCCC;
        }
      }
      .cell-tags{
        height: .3rem;
        margin-bottom: .2rem;
        span{
          line-height: .2rem;
          padding:.05rem .07rem;
          border: .01rem solid #FF4A4A;
          border-radius: .06rem;
          font-size: .2rem;
          color: #FF4A4A;
          letter-spacing: -0.48px;
          &.zy{
            background: #FF4A4A;
            color: #fff;
          }
        }
      }
      .company{
        line-height: .2rem;
        font-size:.2rem;
        color: #CCCCCC;
        i{
          margin-right: .09rem;
        }
      }
    }
  }
}
//底部悬浮框
.bottom-section{
  height: .98rem;
  .foot-bar{
    position: fixed;
    width: 100%;
    height: .98rem;
    line-height: .98rem;
    bottom: 0;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.10);
    font-size: .28rem;
    color: #333;
    label{
      text-align: left;
      color: #333;
    }
    a{
      display: inline-block;
      background: #FF4A4A;
      color: #fff;
      height: 100%;
      &.cancel{
        float: left;
        position: relative;
        width: 50%;
        background: #E8EDF2;
        color: #666;
      }
    }
  }
}

//订单列表
.cart-list ul{
  li{
    margin-bottom: .2rem;
    .address{
      height: 1.1rem;
      line-height: 1.1rem;
      padding: 0 .24rem;
      background: #fff;
      i{
        position: relative;
        top: .01rem;
        margin-right: .16rem;
        font-size: .3rem;
        color: #ccc;
        &.active{
          color: #FF2F51;
        }
        &.active:before{
          content: "\E673";
        }
      }
    }
    .compute{
      height: 1.04rem;
      line-height: 1.04rem;
      padding:0 .32rem;
      text-align: right;
      background: #fff;
      font-size: .28rem;
      color: #000;
      span{
        color: #FF4A4A;
      }
    }
    ol{
      background: rgba(232, 237, 242, 0.23);
      li{
        align-items:center;/*垂直居中*/
        margin-bottom: 0;
        padding: .35rem .24rem .32rem;
        img{
          display: inline-block;
          width: .84rem;
          height: .84rem;
          margin-right: .19rem;
        }
        .cart-center{
          h3{
            height: .72rem;
            line-height: .36rem;
            font-size: .24rem;
            color: #999999;
            overflow: hidden;
            .zy{
              margin-right: .1rem;
              padding: .03rem .05rem;
              border: 1px solid #FF4A4A;
              border-radius: 6px;
              font-size: .2rem;
              color: #FF4A4A;
            }
          }
          p{
            line-height: .4rem;
            line-height: .4rem;
            font-size: .24rem;
            color: #999;
            overflow: hidden;
            span{
              margin-left: .1rem;
            }
          }
        }
        .cart-right{
          margin-left: .24rem;
        }
      }
    }
  }
}

.num-div{
  height: .48rem;
  line-height: .48rem;
  margin-top: .3rem;
  background: #FFFFFF;
  border: 1px solid #E8EDF2;
  box-sizing: border-box;
  border-radius: 6px;
  text-align: center;
  span{
    display: inline-block;
    width:.47rem;
    height: .48rem;
    color: #333;
    &.num{
      width: .6rem;
      border-left: 1px solid #E8EDF2;
      border-right: 1px solid #E8EDF2;
    }
  }
}
//弹出框
.alert-div{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  z-index: 100;
  .alert-fade{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background: #333;
    opacity: .5;
  }
  .alert-box{
    position: absolute;
    width: 100%;
    height: 5.06rem;
    top:auto;
    bottom: 0;
    background-color: #fff;
    z-index: 11;
    .tit{
      height: .88rem;
      line-height: .88rem;
      padding: 0;
      background: #F3F6F9;
      font-size: .28rem;
      color: #333;
      text-align: center;
      i{
        position: absolute;
        right: .32rem;
        font-size: .38rem;
      }
    }
    .goods-list{
      height: 3.2rem;
      padding: 0 .7rem;
      overflow-y: auto;
      .item{
        height: 1.02rem;
        line-height: 1.35rem;
        font-size: .28rem;
        color: #333;
        overflow: hidden;
        span{
          float: right;
          color: #FF4A4A;
        }
        label{
          display: inline-block;
          width: 2.1rem;
        }
        b{
          font-weight: normal;
          color: #151515;
        }
        input {

        }
      }
    }
    .alert-opt{
      position: absolute;
      width: 100%;
      height: .98rem;
      line-height: .98rem;
      bottom: 0;
      text-align: center;
      .btn2{
        background: #E8EDF2;
      }
      .btn3{
        background: #FF4A4A;
        color: #fff;
      }
    }
  }
}
//switch
.switch-box{
  width:.88rem;
  height:.44rem;
  border-radius:90px;
  margin-top:25px;
  border: 2px solid #E8EDF2;
  background: #fff;
  box-shadow: 0 0 0 0;
  box-sizing: border-box;
  .switch-btn{
    width:.42rem;
    height:.42rem;
    background-color: #fff;
    border-radius:100%;
    box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.25);
    transform: translate(0,0.01rem);
  }
}

.switch-box.setShow{
  border: none;
  background:#50E3C2;
  box-shadow: inset 2px 2px 6px 0 rgba(0,0,0,0.25);
  .switch-btn{
    transform: translateX(.44rem);

  }
}